<div class="center">
    <form class="searchArea ng-pristine ng-valid">
        <div class="form-group"><input type="text" class="form-control" placeholder="搜索">
            <i class="clearInputBtn"></i>
            <label class="" for="groupSearch4"></label>
        </div>
    </form>
    <div class="box">

        <div class="list0">

            <!--  -->
            {include file="/common/calendar" /}
            <!--  -->
            <div class="relogio">
                <div>
                    <center>
                        <span id="todaydatetime" class=""></span>
                    </center>
                </div>
            </div>

        </div>
        <div class="list hidden zindex">
            <div class="empty" style="position: absolute;width: 100%;">
                没有通讯好友
            </div>
            <ul>
                {volist name="rooms_list" id="vo"}
                <!--  -->
                {eq name="vo.type" value="1"}
                <li class="room{$vo.id} roomgroup">
                    <a href="###" onclick="cutoverActive(this)" data-id="{$vo.id}" data-group='1'>
                        <div class="ide"></div>
                        <div class="head">{$vo.ide}</div>
                        <div class="name">
                            <div class="nick">{$vo.group_name}</div>
                            <div class="msg">{$vo.details.content|userTextDecode}</div>
                        </div>
                    </a>
                    <div class="time">{$vo.details.created_time|totime=###,'H:i'}</div>
                </li>
                {else/}
                <!--  -->
                {eq name="vo.user_id" value="$user_id"}
                <li class="room{$vo.id}">
                    <a href="###" onclick="cutoverActive(this)" data-other_id="{$vo.other_id}" data-id="{$vo.id}" data-user_id="{$vo.user_id}" data-type="is_u_show">
                        <div class="ide {eq name='vo.u_unread' value='1'}show{/eq}"></div>
                        <div class="head">{$vo.other.ide}</div>
                        <div class="name">
                            <div class="nick">{$vo.other.nickname}</div>
                            <div class="msg">{$vo.details.content|userTextDecode}</div>
                        </div>
                    </a>
                    <div class="time">{$vo.details.created_time|totime=###,'H:i'}</div>
                </li>
                {else/}
                <li class="room{$vo.id}">
                    <a href="###" onclick="cutoverActive(this)" data-other_id="{$vo.user_id}" data-id="{$vo.id}" data-user_id="{$vo.other_id}" data-type="is_o_show">
                        <div class="ide {eq name='vo.u_unread' value='1'}show{/eq}"></div>
                        <div class="head">{$vo.user.ide}</div>
                        <div class="name">
                            <div class="nick">{$vo.user.nickname}</div>
                            <div class="msg">{$vo.details.content|userTextDecode}</div>
                        </div>
                        <div class="time">{$vo.details.created_time|totime=###,'H:i'}</div>
                    </a>
                </li>
                {/eq}
                <!--  -->
                {/eq}
                <!--  -->
                {/volist}
            </ul>
        </div>
        <div class="list2 hidden">
            <div class="group msg2">
                <div class="category">新朋友</div>
                <ul>
                    <li onclick="openMessage(this)">
                        <a href="###">
                            <div class="ide"></div>
                            <div class="head">新</div>
                            <div class="name">新朋友</div>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="group">
                <div class="category" onclick="cutoverGroup(this)" data-id="qgroup">群组<span class="caret"></span></div>
                <ul class="hidden" id="qgroup">
                    {volist name="group" id="vo"}
                    <li onclick="openGroup(this)" data-name="{$vo.group_name}" data-id="{$vo.id}">
                        <a href="###">
                            <div class="head">{$vo.ide}</div>
                            <div class="name">
                                {$vo.group_name}
                            </div>
                        </a>
                    </li>
                    {/volist}
                </ul>
            </div>
            <div class="group">
                <div class="category" onclick="cutoverGroup(this)" data-id="lgroup" style="margin-bottom:10px;">联系人<span class="caret"></span></div>
                <div class="hidden" id="lgroup">
                    {volist name="arr" id="vo"}
                    <!--  -->
                    {notempty name="vo"}
                    <div class="category">{$key}</div>
                    <ul>
                        {volist name="vo" id="v"}
                        <li onclick="openfriend(this)" data-name="{$v.nickname}" data-id="{$v.id}">
                            <a href="###">
                                <div class="head">{$v.ide}</div>
                                <div class="name">
                                    {$v.nickname}
                                </div>
                            </a>
                        </li>
                        {/volist}
                    </ul>
                    {/notempty}
                    <!--  -->
                    {/volist}
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="__PUBLIC__/chat/js/times.js"></script>

<script>
    function displayTime() {
        var elt = document.getElementById("todaydatetime");
        var now = new Date();
        var h = now.getHours();
        var m = now.getMinutes();
        var s = now.getSeconds();
        var ms = now.getMilliseconds();
        if (h < 10) {
            h = '0' + h;
        }
        if (m < 10) {
            m = '0' + m;
        }
        if (s < 10) {
            s = '0' + s;
        }
        elt.innerHTML = h + ":" + m + ":" + s;
        setTimeout(displayTime, 100);
    }
    displayTime();

    //打开好友界面
    function openfriend(e) {
        $('.home .center .list2 li').removeClass('active');
        $(e).addClass('active');
        var title = $(e).data('name');
        var id = $(e).data('id');
        var url = "{:url('friend_info')}?id=" + id;
        layer.closeAll();
        width = $(window).width();
        layer.open({
            btn: ['发消息', '关闭'],
            type: 2,
            title: title,
            shadeClose: true,
            shade: false,
            maxmin: true, //开启最大化最小化按钮
            area: ['300px', '250px'],
            content: url,
            btnclass: ['btn btn-info', 'btn btn-danger'],
            yes: function(index, layero) {
                layer.closeAll()
                $.get("{:url('create_friend')}?id=" + id, function(res) {
                    $('.home .left .contacts').removeClass('active');
                    $('.home .left .message').addClass('active');
                    $('.home .center .box .list2').addClass('hidden');
                    $('.home .center .box .list').removeClass('hidden');
                    var user_id = "{:getSessInfo('id')}";
                    res = res.data;
                    if (res.user_id == user_id) {
                        updataMsg(res.id, '', res.other_id, res.time, res.user.nickname, user_id, res.user.ide, 'is_u_show');
                    } else {
                        updataMsg(res.id, '', user_id, res.time, res.user.nickname, res.other_id, res.user.ide, 'is_o_show');
                    }
                    cutoverActive($('.home .center .list .room' + res.id + ' a'));
                })
            },
            cancel: function() {
                return true;
            }
        });
        if (width > 700) {} else {
            $('.layui-layer').css('top', 0);
        }
    }


    //打开群组界面
    function openGroup(e) {
        $('.home .center .list2 li').removeClass('active');
        $(e).addClass('active');
        var title = $(e).data('name');
        var id = $(e).data('id');
        var url = "{:url('group_info')}?id=" + id;
        layer.closeAll();
        width = $(window).width();
        layer.open({
            btn: ['发消息', '关闭'],
            type: 2,
            title: title,
            shadeClose: true,
            shade: false,
            maxmin: true, //开启最大化最小化按钮
            area: ['300px', '250px'],
            content: url,
            btnclass: ['btn btn-info', 'btn btn-danger'],
            yes: function(index, layero) {
                layer.closeAll()
                $('.home .left .contacts').removeClass('active');
                $('.home .left .message').addClass('active');
                $('.home .center .box .list2').addClass('hidden');
                $('.home .center .box .list').removeClass('hidden');
                cutoverActive($('.home .center .list .room' + id + ' a'));
            },
            cancel: function() {
                return true;
            }
        });
        if (width > 700) {} else {
            $('.layui-layer').css('top', 0);
        }
    }
    // function updataMsg(id, content, otherid, time, nickname, userid, ide) {

    /**
     *切换 消息界面 
     */
    function openMessage(e) {
        var status = 0;
        if ($(e).find('.active').length > 0) {
            $('.home .contacts .ide').hide().removeClass('active');
            $('.list2 .msg2 .ide').hide().removeClass('active');
            var status = 1;
        }
        $.get("{:url('ide_friend')}?status=" + status, function(res) {
            $('.box2 .message .contents ul').empty()
            if (res.code == 1) {
                $.each(res.data, function(i, v) {
                    console.log(v);
                    var html = '';
                    html += '<li class="list-group-item" id="li_' + v.id + '">';
                    html += '    <span class="head">' + v.user.ide + '</span>';
                    html += '    <span class="badge ' + v.class + ' btn" onclick="other_adds(this)" data-id="' + v.id + '">' + v.button + '</span>';
                    html += '    <div>' + v.user.nickname + '</div>';
                    html += '    <div style="font-size:14px;color:#999;">' + v.remark + '</div>';
                    html += ' </li>';
                    $('.box2 .message .contents ul').append(html)
                })
            }
        });
        $('.home .center .list2 li').removeClass('active');
        $(e).addClass('active');
        $('.box2 .message,.box2').removeClass('hidden');
    }
</script>